<template>
  <div class="roles">
    <!-- 面包 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加角色 -->
    <el-button type="success" plain class="addBtn">添加角色</el-button>

    <!-- 表格 -->
    <el-table :data="form">
      <el-table-column type="expand">
        <template v-slot="{row}">
          <p v-if="row.children.length === 0">暂无数据</p>
          <el-row v-for="l1 in row.children" :key="l1.id" class="l1">
            <el-col :span="4">
              <el-tag closable  @close="handleClose(row,l1.id)">{{l1.authName}}</el-tag><i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="l2 in l1.children" :key="l2.id">
                <el-col :span="4">
                  <el-tag closable class="l2" type="success"  @close="handleClose(row,l2.id)">{{l2.authName}}</el-tag><i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="20">
                    <el-tag  closable v-for="l3 in l2.children" :key="l3.id" class="l3" type="warning"  @close="handleClose(row,l3.id)">{{l3.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="角色名称" prop="roleName"></el-table-column>
      <el-table-column label="描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button icon="el-icon-edit" plain type="primary" size="small"></el-button>
          <el-button icon="el-icon-delete" plain type="danger" size="small"></el-button>
          <el-button icon="el-icon-check" plain type="success" size="small" @click="showAssginDialog(row)">分配权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分配权限对话框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="dialogVisible"
      width="40%"
      >
        <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        :props="defaultProps">
      </el-tree>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="rolesOk()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created () {
    this.getRolesList()
  },
  data () {
    return {
      form: [],
      dialogVisible: false,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'authName'
      },
      roid: ''
    }
  },
  methods: {
    async getRolesList () {
      const { meta, data } = await this.$axios.get('roles')
      if (meta.status === 200) {
        console.log(data)

        this.form = data
      }
    },
    async handleClose (row, id) {
      console.log(row)
      const { meta, data } = await this.$axios.delete(`roles/${row.id}/rights/${id}`)
      if (meta.status === 200) {
        this.$message.success(meta.msg)
        row.children = data
        console.log(row)
      }
    },
    async showAssginDialog (row) {
      console.log(row)
      this.roid = row.id
      this.dialogVisible = true
      const { data, meta } = await this.$axios.get('rights/tree')
      if (meta.status === 200) {
        this.data = data
        const ids = []
        row.children.forEach(l1 => {
          l1.children.forEach(l2 => {
            l2.children.forEach(l3 => {
              ids.push(l3.id)
            })
          })
        })
        this.$refs.tree.setCheckedKeys(ids)
      }
    },
    async rolesOk () {
      const rid = this.$refs.tree.getHalfCheckedKeys()
      const halfid = this.$refs.tree.getCheckedKeys()
      const rids = [...rid, ...halfid].join(',')
      const { meta } = await this.$axios.post(`roles/${this.roid}/rights`, { rids })
      if (meta.status === 200) {
        this.dialogVisible = false
        this.$message.success(meta.msg)
        this.getRolesList()
      }
    }

  }
}
</script>

<style lang="less" scoped>
  .addBtn {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .l1{
    margin-bottom: 10px;
  }
  .l2 {
    margin-bottom: 10px;
  }
  .l3 {
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
